<template>
  <div class="app-container">
    <div class="profile-card">
      <div class="profile-card__avatar">
        <el-avatar
          :size="120"
          :src="userInfo.avatar"
        />
      </div>
      <div class="profile-card__info">
        <em-descriptions
          :column="2"
          gutter="10px 0"
          size="small"
          label-position="left"
          label-width="100px"
          label-suffix="："
        >
          <em-descriptions-item label="登录账号">{{ userInfo.name }}</em-descriptions-item>
          <em-descriptions-item label="手机号">{{ userInfo.mobile }}</em-descriptions-item>
          <em-descriptions-item label="账号ID">{{ userInfo.id }}</em-descriptions-item>
          <em-descriptions-item label="注册时间">{{ $moment(userInfo.created_at*1000).format('LLL') }}</em-descriptions-item>
          <em-descriptions-item
            v-if="userInfo.authent"
            label="实名认证"
          >
            <el-tag
              size="small"
              type="success"
            >已认证</el-tag>
            <router-link>详情</router-link>
          </em-descriptions-item>
          <em-descriptions-item
            v-else
            label="实名认证"
          >
            <el-tag
              size="small"
              type="warning"
            >未认证</el-tag>
            <router-link to="/account/authent">去认证</router-link>
          </em-descriptions-item>
          <em-descriptions-item label="账号类型">
            <el-tag
              v-for="role in roles"
              :key="role"
              size="small"
            >{{ role }}</el-tag>
          </em-descriptions-item>
        </em-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Profile',
  components: {},
  data() {
    return {
      userInfo: {},
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters(['user', 'roles'])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.userInfo = {
        name: '',
        role: this.roles.join(' | '),
        email: '',
        avatar: '',
        ...this.user
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.profile-card {
  display: flex;
  align-items: center;
  padding: 20px 0;
  &__avatar {
    padding: 0 30px;
  }
  &__info {
    width: 700px;
    padding-left: 40px;
  }
}
</style>
